<template>
  <div class="h-full">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="flex-1 form-style-flex" :model="formState" :colon="false" :label-col="{ style: { width: '80px' } }">
        <a-form-item name="zjm">
          <a-input v-model:value="formState.zjm" class="w-64" placeholder="服务项目/助记码" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <a-space class="mb-2">
        <BaseButton type="primary" @click="onClickEdit()">新增</BaseButton>
        <BaseExport type="理疗" name="服务项目" code="00001136" class="mb-0" :search-params="formState">导出</BaseExport>
      </a-space>
      <BaseTable :loading="loading" column-code="00001136" :data-source="tableData" :pagination="pagination" :scroll="{ x: 1000 }" fill>
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'statusStr'">
            <a-tag :color="record.status !== 0 ? 'red' : 'green'">{{ record.status !== 0 ? '停用' : '启用' }}</a-tag>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" size="small" @click="onClickEdit(record)">修改</a-button>

            <a-divider type="vertical" />
            <BaseButton type="link" size="small" :disabled="record.status !== 1" @click="onChangeStatus(record, 0)">启用</BaseButton>
            <a-divider type="vertical" />
            <BaseButton confirm-text="确认停用？" type="link" danger size="small" :disabled="record.status !== 0" @click="onChangeStatus(record, 1)"
              >停用</BaseButton
            >
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Edit v-model:open="editOpen" :row-data="rowData" @success="onSuceess" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import BaseButton from '@/components/BaseButton'
import Edit from './Edit'

const formState = ref({ zjm: '' })
const editOpen = ref(false)
const rowData = ref(null)
const formRef = ref(null)
const { loading, tableData, getData, pagination } = useTable({
  url: '/course/courseServiceItem/getServiceItemList',
  immediate: true,
  params: formState.value
})
const onSuceess = () => {
  getData()
}
//启用
const onChangeStatus = async (record, type) => {
  const res = await post('course/courseServiceItem/doUpdateServiceItemStatus', {
    itemCode: record.itemCode,
    status: type
  })
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  getData()
}
onMounted(() => {
  getData()
})

const onClickEdit = (record = {}) => {
  editOpen.value = true
  rowData.value = record
}
</script>

<style lang="less" scoped></style>
